<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>fileupload-test</title>
        <script type="text/javascript" src="../../js/jquery/jquery.js"></script>
        <script type="text/javascript" src="../../js/jquery/jquery-migrate.js"></script>
        <script type="text/javascript" src="../../js/jqueryui/jquery-ui.js"></script>		
		<script type="text/javascript" src="../../js/ctp/public/jsextend.js"></script>
        <script type="text/javascript" src="../../js/ctp/public/ctp.core.js"></script>
		<script type='text/javascript' src='../../js/ctp/public/ctp.base.js'></script>
		<script type='text/javascript' src='../../js/ctp/public/ctp.ui.component.js'></script>
        <script type="text/javascript" src="../../js/ctp/fileupload/ctp.ui.fileupload.js"></script>
		<script type="text/javascript" src="../../js/ctp/panel/ctp.ui.panel.js"></script>
        <script type="text/javascript" src="../../js/ctp/button/ctp.ui.button.js"></script>
		<script type="text/javascript" src="../../js/ctp/groupbox/ctp.ui.groupbox.js"></script>
		<script type="text/javascript" src="../../js/ctp/gridlayout/ctp.ui.gridlayout.js"></script>
		<script type="text/javascript" src="../../js/ctp/messagebox/ctp.ui.messagebox.js"></script>
		<link href="../../css/skins/standard/ctp-common.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/fileupload.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/panel.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/button.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/groupbox.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/gridlayout.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/messagebox.css" rel="stylesheet" type="text/css"/>
        <script>
            $(document).ready(function(){ 			                 
			    var filesUp=new ctp.ui.fileupload({
			  	    id:'fileuploadId',
					style: 'button',
					browseBtnText: '浏览',
					extFilter: 'all',
					extErrMsg: '抱歉，不支持上传该类型文件',
					maxCount: 20,
					overflowMsg: '抱歉，一次只能上传20个文件',
					minCount: 2,
					notEnoughMsg: '请选择至少2个文件',
					uploadBtn: true,
					uploadBtnText: '上传',
					clearBtn: true,
					clearBtnText: '清空',
					repeatable: false,
					repeatErrMsg: '所选择的文件已经存在上传文件列表中',
					formName: 'uploadForm',
					action: 'newfileupload.flowc',
					flowactionname: 'newfileup',
					onBrowse:function(fullPath){
					//alert(fullPath);
					return true;}
			    });
               
                var button1=new ctp.ui.button({
                    id: 'button1',
                    text: '取得组件ID',
                    width: '100%',
                    onClick: function(){
						ctpMSB.alert({title:'信息提示',message:filesUp.getId()});
                    }
                });
                var button2=new ctp.ui.button({
                    id: 'button2',
                    text: '取得组件Dom ID',
                    width: '100%',
                    onClick: function(){
                        ctpMSB.alert({title:'信息提示',message:filesUp.getDomId()});
                    }
                });
                var button3=new ctp.ui.button({
                    id: 'button3',
                    text: '取得组件类型',
                    width: '100%',
                    onClick: function(){                
						ctpMSB.alert({title:'信息提示',message:filesUp.getCtpWebType()});
                    }
                });
               var button4= new ctp.ui.button({
                    id: 'button4',
                    text: '上传文件',
                    width: '100%',
                    onClick: function(){
                        filesUp.upload();
                    }
                });
                var button5=new ctp.ui.button({
                    id: 'button5',
                    text: '取得组件的值',
                    width: '100%',
                    onClick: function(){
                        ctpMSB.alert({title:'信息提示',message:filesUp.getValue()});
                    }
                });
                var button7=new ctp.ui.button({
                    id: 'button7',
                    text: '取得组件的本地路径',
                    width: '100%',
                    onClick: function(){
                        ctpMSB.alert({title:'信息提示',message:filesUp.getLocalPath()});
                    }
                });
                var button6=new ctp.ui.button({
                    id: 'button6',
                    text: '隐藏上传按钮',
                    width: '100%',
                    onClick: function(){
                        filesUp.hideUploadBtn();                    }
                });
                var showLayout = new ctp.ui.gridlayout({
					id:'showLayout',
                    width: '80%',
                    cols: 1,
                    align: 'center',
                    items: [[{align: 'center',element: filesUp}]]
                
                });  
				var showGroupbox=new ctp.ui.groupbox({
			  	    id: 'showGroupbox',						
					items:[showLayout],
					title:'效果展示区'						   
			     });
				var buttonsLayout = new ctp.ui.gridlayout({
					id:'buttonsLayout',
                    width: '98%',
                    cols: 3,
                    align: 'center',
                    colSpace: 30,
                    items: [
					     [{element: button1},{element: button2},{element: button3}],
						 [{element: button4},{element: button5},{element: button6}],
						 [{element: button7}]
					]
                
                }); 
				var buttonsGroupbox=new ctp.ui.groupbox({
			  	    id: 'buttonsGroupbox',						
					items:[buttonsLayout],
					width:'100%',
					title:'功能测试区'						   
			     });
				new ctp.ui.panel({
                    title: 'fileupload实例',
                    collapsible: true,
                    width: '550px',
                    height: 'auto',
					align:'center',
					items:[showGroupbox,buttonsGroupbox],
                    renderTo: 'body'
                });            
            });
		</script>
	</head>
	<body>
		<b>ctp.ui.fileupload实例</b>
        <hr/>
        <br/>
		<form name="uploadForm" method="POST" action="/" enctype="multipart/form-data" flowActionName="/">
		</form>
	</body>
</html>